import React from "react";
import {Executive, GameStatus} from '../enum/GameStatus'
import {pieceState} from "../enum/PieceState";
import {checkerboardStates} from '../types/Checkerboard'
import {Checkerboard} from './checkerboard'
import './Games.css'
interface isState {
    GameStatus: GameStatus
    checkerboardList: checkerboardStates
    Executive: Executive
    status: string
}

export class Games extends React.Component<any, isState> {
    constructor(props: any) {
        super(props);
        this.state = {
            GameStatus: GameStatus.inGame,
            checkerboardList: new Array(9).fill(pieceState.air),
            Executive: Executive.blackInGame,
            status: '黑方落子'
        }
    }

    render() {
        return <div className="Game">
            <div className="title" style={(this.state.status==='黑方胜利'||this.state.status==='黑方落子')? {color: 'black'}: {color:'red'}}>{this.state.status}</div>
            <Checkerboard checkerboardList={this.state.checkerboardList} onClick={(index) => {
                //在游戏中
                if (this.state.GameStatus === GameStatus.inGame) {
                    let gamestate: GameStatus = GameStatus.inGame
                    let title: string = this.state.status
                    title = this.state.Executive === Executive.blackInGame ? '红方落子' : '黑方落子'
                    //获取最新的棋盘
                    let list = this.state.checkerboardList.map((v, i) => {
                        if (i === index) {
                            if (this.state.Executive === Executive.blackInGame) {
                                return pieceState.stateBlack
                            } else {
                                return pieceState.stateRed
                            }
                        } else {
                            return v
                        }
                    })
                    // 判断最新的棋盘游戏是否结束
                    let count = Math.floor(index / 3) * 3
                    if ((list[index % 3] === list[(index % 3) + 3] && list[index % 3] === list[(index % 3) + 6] && list[index % 3] !== pieceState.air)
                        || (list[count] === list[count + 1] && list[count] === list[count + 2] && list[count] !== pieceState.air)
                        || (list[0] === list[4] && list[0] === list[8] && list[4] !== pieceState.air)
                        || (list[2] === list[4] && list[2] === list[6] && list[4] !== pieceState.air)) {
                        // 判断结束胜利状态
                        if (this.state.Executive === Executive.blackInGame) {
                            gamestate = GameStatus.blackVictory
                            title = '黑方胜利'
                        } else {
                            gamestate = GameStatus.redVictory
                            title = '红方胜利'
                        }
                    }
                    // 不满足胜利状态情况下判断游戏是否平局
                    else if (!list.some((es) => es === pieceState.air)) {
                        gamestate = GameStatus.draw
                        title = '平局'
                    }
                    this.setState({
                        GameStatus: gamestate,
                        checkerboardList: list,
                        status: title,
                        Executive: this.state.Executive === Executive.blackInGame ? Executive.redInGame : Executive.blackInGame
                    })
                }
                //游戏结束
                else if (this.state.GameStatus === GameStatus.blackVictory) {
                    this.setState({
                        status: '黑方胜利'
                    })
                } else if (this.state.GameStatus === GameStatus.redVictory) {
                    this.setState({
                        status: '红方胜利'
                    })
                } else {
                    this.setState({
                        status: '平局'
                    })
                }
            }
            }/>
            <button onClick={() => {
                this.setState({
                    GameStatus: GameStatus.inGame,
                    checkerboardList: new Array(9).fill(pieceState.air),
                    Executive: Executive.blackInGame,
                    status: '黑方落子'
                })
            }
            }>重新开始
            </button>
        </div>;
    }
}